<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="flex-col flex-row wraper-col">
                <view class="flex-row box">
                    <view class="u-line-1 text">{{self.name}}</view>
                    <view class="flex-row box-col">
                        <view class="u-line-1 text-two">{{self.relation}}</view>
                    </view>
                </view>
                <view class="u-line-1 text-three">{{self.number}}</view>
            </view>
            <view class="flex-col wraper-col-two" @click="cutPat">
                <u-icon class="icon-list" name="list" color="#006eff"></u-icon>
                <view class="u-line-1 text-four">切换就诊人</view>
            </view>
        </view>
        <view class="flex-row wrapper-two">
            <view class="u-line-1 text-five">卡内余额</view>
            <view class="u-line-1 text-six">￥{{card.balance}}</view>
            <view class="u-line-1 text-seven"></view>
        </view>
        <view class="u-line-1 text-eight">待缴费项目</view>
        <view class="flex-col wrapper-three" v-for="payRecor in payRecor">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-nine" v-if="!!payRecor.drugs">{{payRecor.drugs.source}}费</view>
                <view class="u-line-1 text-ten">￥{{payRecor.price}}</view>
            </view>
            <view class="flex-row wraper-row-two">
                <view class="flex-col flex-row box-two">
                    <view class="u-line-1 text-eleven">{{payRecor.divisionType.divisionName}} {{payRecor.doctor.doctorName}}</view>
                    <view class="u-line-1 text-twelve">{{payRecor.createTime}}</view>
                </view>
                <u-button class="button" type="success" size="medium" @click="payMes(payRecor)">
                    去缴费
                </u-button>
            </view>
        </view>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				user:'',
				self:'',
				isCut:false,
				patient:[],
				payRecor:[],
				card:''
			}
        },
        methods: {
			
			//缴费信息
			payMes(payRecor){
				let data = {
					id:payRecor.id,
					panId:this.self.id,
					name:this.self.name,
					number:this.self.number,
					divisionName:payRecor.divisionType.divisionName,
					doctorName:payRecor.doctor.doctorName,
					source:payRecor.drugs.source,
					hospitalMark:payRecor.hospitalMark,
					balance:this.balance,
					cardId:this.card.id,
					cardNo:this.card.cardNo
				}
				console.log("data" , data)
				uni.navigateTo({
					url:"payMes?msg="+JSON.stringify(data)
				})
			},
			
			//查询就诊人待缴费记录
			pantPayRecor(id){
				uni.request({
					url: this.URL + "record/record/drug-record/pantPayRecor/" + id,
					method:"GET",
					success: (res) => {
						if (res.data.code = 20000) {
							this.payRecor = res.data.data.payRecor
						}
						console.log("payRecor" , this.payRecor)
					}
				})
			},
			
			//根据就诊人查询卡内余额
			cardBalance(id){
				uni.request({
					url: this.URL + "record/record/record/cardBalance/" + id,
					method:"GET",
					success: (res) => {
						console.log("balance" , res)
						if (res.data.code = 20000) {
							this.card = res.data.data.balance.patientCard
							console.log( "this.card" ,  this.card)
						}
					}
				})
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			//切换就诊人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if(id == this.patient[i].id){
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.cardBalance(this.self.id)
				this.pantPayRecor(this.self.id)
			},

        },
		onLoad() {
			this.user = uni.getStorageSync("user");
			console.log(this.user.id)
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + this.user.id,
				method: "GET",
				success: (res) => {
					console.log("res" , res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].relation == "本人") {
								this.self = this.record[i]
							}
						}
						console.log("this.self" , this.self)
						//根据就诊人查询卡内余额
						this.cardBalance(this.self.id)
						this.pantPayRecor(this.self.id)
					}
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 32rpx 20rpx 0rpx 20rpx;
        border-width: 30rpx;
        border-top-color: #aaaaa;

        .wrapper {
            width: 710rpx;
            justify-content: space-between;
            margin-bottom: 40rpx;
            padding: 20rpx 46rpx 20rpx 24rpx;
            border-radius: 10rpx;
            background: #f5f9ff;

            .wraper-col {
                width: 234rpx;
                margin-top: 20rpx;

                .box {
                    width: 202rpx;
                    justify-content: space-between;
                    margin-bottom: 30rpx;

                    .text {
                        width: 112rpx;
                        font-size: 32rpx;
                    }

                    .box-col {
                        width: 90rpx;
                        justify-content: center;
                        border-radius: 40rpx;
                        background: #e2edfe;

                        .text-two {
                            width: 70rpx;
                            letter-spacing: 4rpx;
                            color: #668aff;
                        }
                    }
                }

                .text-three {
                    width: 100%;
                    font-size: 24rpx;
                    color: #aaaaad;
                }
            }

            .wraper-col-two {
                width: 144rpx;
                padding: 32rpx 0rpx 16rpx 0rpx;

                .icon-list {
                    display: block;
                    margin-right: auto;
                    margin-bottom: 20rpx;
                    margin-left: auto;
                }

                .text-four {
                    width: 100%;
                }
            }
        }

        .wrapper-two {
            width: 710rpx;
            justify-content: space-between;
            margin-bottom: 42rpx;
            padding: 37rpx 0rpx 37rpx 22rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .text-five {
                width: 224rpx;
                font-size: 32rpx;
            }

            .text-six {
                width: 146rpx;
                font-size: 32rpx;
            }

            .text-seven {
                bottom: -12rpx;
                left: -20rpx;
                position: absolute;
            }
        }

        .text-eight {
            width: 100%;
            margin-bottom: 40rpx;
            font-size: 32rpx;
        }

        .wrapper-three {
            width: 100%;
            margin-bottom: 20rpx;
            padding: 26rpx 0rpx 24rpx 24rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .wraper-row {
                width: 670rpx;
                justify-content: space-between;
                margin-bottom: 8rpx;

                .text-nine {
                    width: 188rpx;
                    font-size: 32rpx;
                }

                .text-ten {
                    width: 154rpx;
                    margin-top: 12rpx;
                    font-size: 32rpx;
                    color: #f46363;
                }
            }

            .wraper-row-two {
                width: 670rpx;
                justify-content: space-between;

                .box-two {
                    width: 230rpx;

                    .text-eleven {
                        width: 206rpx;
                        margin-bottom: 20rpx;
                        font-size: 24rpx;
                        color: #c0c0c0;
                    }

                    .text-twelve {
                        width: 200%;
                        font-size: 24rpx;
                        color: #c0c0c0;
                    }
                }

				.button {
				    width: 25%;
				    height: 74rpx;
					top: 10px;
					left: 70px;
				    background: #006eff;
				}
            }
        }

        .wrapper-four {
            width: 710rpx;
            justify-content: space-between;
            padding: 26rpx 16rpx 24rpx 24rpx;
            border-radius: 10rpx;
            background: #ffffff;

            .wraper-col-three {
                width: 230rpx;

                .text-thirteen {
                    width: 188rpx;
                    margin-bottom: 20rpx;
                    font-size: 32rpx;
                }

                .text-fourteen {
                    width: 206rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    color: #c0c0c0;
                }

                .text-fifteen {
                    width: 100%;
                    font-size: 24rpx;
                    color: #c0c0c0;
                }
            }

            .wraper-col-four {
                width: 192rpx;
                margin-top: 12rpx;

                .text-sixteen {
                    width: 154rpx;
                    margin: 0rpx 0rpx 30rpx 38rpx;
                    font-size: 32rpx;
                    color: #f46363;
                }

                .button-two {
                    width: 100%;
                    height: 74rpx;
                    background: #006eff;
                }
            }
        }
    }
</style>